// UI状态管理模块
const state = {
  // 侧边栏状态
  sidebar: {
    opened: true,
    collapsed: false
  },

  // 主题设置
  theme: {
    name: 'dark',
    primaryColor: '#00ffff',
    backgroundColor: '#0a0a0a'
  },

  // 布局设置
  layout: {
    showHeader: true,
    showFooter: true,
    showSidebar: true,
    fullscreen: false
  },

  // 响应式断点
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1600
  },

  // 当前屏幕尺寸
  screenSize: 'lg',

  // 通知消息队列
  notifications: [],

  // 模态框状态
  modals: {
    login: false,
    settings: false,
    confirm: false
  }
}

const getters = {
  sidebarOpened: state => state.sidebar.opened,
  sidebarCollapsed: state => state.sidebar.collapsed,
  currentTheme: state => state.theme,
  layoutConfig: state => state.layout,
  isFullscreen: state => state.layout.fullscreen,
  currentScreenSize: state => state.screenSize,
  notifications: state => state.notifications,
  modalStates: state => state.modals,
  isMobile: state => ['xs', 'sm'].includes(state.screenSize)
}

const mutations = {
  // 切换侧边栏
  TOGGLE_SIDEBAR(state) {
    state.sidebar.opened = !state.sidebar.opened
  },

  // 设置侧边栏状态
  SET_SIDEBAR_STATE(state, opened) {
    state.sidebar.opened = opened
  },

  // 切换侧边栏折叠状态
  TOGGLE_SIDEBAR_COLLAPSE(state) {
    state.sidebar.collapsed = !state.sidebar.collapsed
  },

  // 设置主题
  SET_THEME(state, theme) {
    state.theme = { ...state.theme, ...theme }
    // 保存到本地存储
    localStorage.setItem('uiTheme', JSON.stringify(state.theme))
  },

  // 设置布局
  SET_LAYOUT(state, layout) {
    state.layout = { ...state.layout, ...layout }
  },

  // 切换全屏
  TOGGLE_FULLSCREEN(state) {
    state.layout.fullscreen = !state.layout.fullscreen
  },

  // 设置屏幕尺寸
  SET_SCREEN_SIZE(state, size) {
    state.screenSize = size
  },

  // 添加通知
  ADD_NOTIFICATION(state, notification) {
    state.notifications.push({
      id: Date.now(),
      type: 'info',
      duration: 3000,
      ...notification
    })
  },

  // 移除通知
  REMOVE_NOTIFICATION(state, id) {
    const index = state.notifications.findIndex(n => n.id === id)
    if (index > -1) {
      state.notifications.splice(index, 1)
    }
  },

  // 清空所有通知
  CLEAR_NOTIFICATIONS(state) {
    state.notifications = []
  },

  // 设置模态框状态
  SET_MODAL_STATE(state, { modal, opened }) {
    state.modals[modal] = opened
  },

  // 切换模态框
  TOGGLE_MODAL(state, modal) {
    if (state.modals.hasOwnProperty(modal)) {
      state.modals[modal] = !state.modals[modal]
    }
  }
}

const actions = {
  // 初始化UI状态
  initializeUI({ commit }) {
    // 从本地存储恢复主题设置
    const savedTheme = JSON.parse(localStorage.getItem('uiTheme') || 'null')
    if (savedTheme) {
      commit('SET_THEME', savedTheme)
    }
  },

  // 切换侧边栏
  toggleSidebar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },

  // 设置侧边栏状态
  setSidebarState({ commit }, opened) {
    commit('SET_SIDEBAR_STATE', opened)
  },

  // 切换侧边栏折叠
  toggleSidebarCollapse({ commit }) {
    commit('TOGGLE_SIDEBAR_COLLAPSE')
  },

  // 设置主题
  setTheme({ commit }, theme) {
    commit('SET_THEME', theme)
  },

  // 设置布局
  setLayout({ commit }, layout) {
    commit('SET_LAYOUT', layout)
  },

  // 切换全屏模式
  toggleFullscreen({ commit }) {
    commit('TOGGLE_FULLSCREEN')
  },

  // 更新屏幕尺寸
  updateScreenSize({ commit, state }, width) {
    let size = 'xs'

    if (width >= state.breakpoints.xxl) {
      size = 'xxl'
    } else if (width >= state.breakpoints.xl) {
      size = 'xl'
    } else if (width >= state.breakpoints.lg) {
      size = 'lg'
    } else if (width >= state.breakpoints.md) {
      size = 'md'
    } else if (width >= state.breakpoints.sm) {
      size = 'sm'
    }

    if (size !== state.screenSize) {
      commit('SET_SCREEN_SIZE', size)
    }
  },

  // 显示通知
  showNotification({ commit }, notification) {
    commit('ADD_NOTIFICATION', notification)

    // 如果设置了自动消失时间
    if (notification.duration > 0) {
      setTimeout(() => {
        commit('REMOVE_NOTIFICATION', notification.id || Date.now())
      }, notification.duration)
    }
  },

  // 隐藏通知
  hideNotification({ commit }, id) {
    commit('REMOVE_NOTIFICATION', id)
  },

  // 清空通知
  clearNotifications({ commit }) {
    commit('CLEAR_NOTIFICATIONS')
  },

  // 打开模态框
  openModal({ commit }, modal) {
    commit('SET_MODAL_STATE', { modal, opened: true })
  },

  // 关闭模态框
  closeModal({ commit }, modal) {
    commit('SET_MODAL_STATE', { modal, opened: false })
  },

  // 切换模态框
  toggleModal({ commit }, modal) {
    commit('TOGGLE_MODAL', modal)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
